<template>
  <div>
    <section class="container animate__animated animate__fadeInBottomLeft">
      <!-- 左容器 -->
      <section class="itemLeft">
        <Page>
          <template #main>
            <One />
          </template>
        </Page>
        <Page>
          <template #main>
            <Two></Two>
          </template>
        </Page>
      </section>

      <!-- 右容器 -->
      <section class="itemRight">
        <Page>
          <template #main>
            <Three></Three>
          </template>
        </Page>
        <Page>
          <template #main>
            <Four></Four>
          </template>
        </Page>
      </section>
    </section>
  </div>
</template>

<script setup lang="ts">
import Page from '../components/Page.vue'
import One from '../components/One.vue'
import Two from '../components/Two.vue'
import Three from '../components/Three.vue'
import Four from '../components/Four.vue'
</script>

<style lang="scss" scoped>
.animate__animated .animate__fadeInBottomLeft{
  --animate-duration: 5s;
}
.container {
  width: 100%;
  margin: 0 auto;
  // background-color: gray;
  display: flex;
  // min-width: 14.84rem;

  .itemLeft,
  .itemRight {
    flex: 1;
  }
}
</style>